<template>
  <common-list>
    <common-search slot="search" @search="handleQuery" @reset="resetQuery">
      <el-form
        :model="queryParams"
        ref="queryForm"
        @submit.native.prevent
        :inline="true"
        label-width="75px"
      >
        <el-form-item
          label="业务系统"
          prop="appName
"
        >
          <el-select v-model="queryParams.appName" class="custom-select">
            <el-option label="全部" :value="null"></el-option>
            <el-option
              class="custom-select"
              v-for="(item, index) in businessCodeList"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictLabel"
            >
              <span class="selectList">
                <common-marquee-text :content="item.dictLabel">
                </common-marquee-text>
              </span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="数据库名称" prop="dbName">
          <common-input
            v-model="queryParams.dbName"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
      </el-form>
    </common-search>
    <el-row slot="tools" :gutter="10" class="mb8" style="margin-top: 15px">
      <el-col :span="1.5">
        <el-dropdown @command="changeUserStatus" style="width: 100px">
          <el-button
            type="primary"
            plain
            icon="el-icon-upload2"
            :loading="exportLoading"
            class="btn-color-hover-white"
            v-hasPermi="['datascan:filing:exportFormCore']"
            >导出<commonIcon
              iconName="el-icon-arrow-down el-icon--right"
              iconType="icon"
              :iconSize="12"
              isStyle
            ></commonIcon>
          </el-button>
          <el-dropdown-menu slot="dropdown" style="width: 100px">
            <el-dropdown-item command="xlsx">XLSX</el-dropdown-item>
            <el-dropdown-item command="xls">XLS</el-dropdown-item>
            <el-dropdown-item command="html">HTML</el-dropdown-item>
            <el-dropdown-item command="xml">XML</el-dropdown-item>
            <el-dropdown-item command="doc">DOC</el-dropdown-item>
            <el-dropdown-item command="docx">DOCX</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
    <common-table
      slot="content"
      v-loading="loading"
      :data="list"
      @selection-change="handleSelectionChange"
    >
      <!-- 数据基本情况 -->
      <el-table-column label="数据基本情况" align="center">
        <!-- <el-table-column
          label="数据类型"
          prop="dataType"
          show-overflow-tooltip
          width="120"
        /> -->
        <el-table-column
          fixed
          label="类别"
          prop="subDataType"
          show-overflow-tooltip
          width="120"
        />
        <el-table-column
          label="子类别"
          prop="detailDataType"
          show-overflow-tooltip
          width="120"
        />
        <el-table-column
          label="数据项名称"
          prop="dataName"
          show-overflow-tooltip
          width="160"
        />
        <!-- <el-table-column
          label="填报责任部门"
          prop="dept"
          show-overflow-tooltip
          width="160"
        /> -->
        <el-table-column
          label="数据载体"
          prop="dataCarrier"
          show-overflow-tooltip
          width="120"
        />
        <el-table-column
          label="数据量（条）"
          prop="dataCount"
          show-overflow-tooltip
          width="120"
        />
        <el-table-column
          label="数据来源"
          prop="dataSource"
          show-overflow-tooltip
          width="120"
        />
        <el-table-column
          label="数据精度"
          prop="dataAccuracy"
          show-overflow-tooltip
          width="120"
        />
        <el-table-column
          label="数据项详细描述"
          prop="dataDescrible"
          width="120"
          show-overflow-tooltip
        />
      </el-table-column>
      <!-- 数据使用情况 -->
      <el-table-column label="数据处理情况" align="center">
        <el-table-column
          label="是否涉及数据出境"
          prop="isOutside"
          width="160"
          show-overflow-tooltip
        />
        <!-- <el-table-column
          label="数据出境接收方国家和地区"
          prop="outsideCountry"
          show-overflow-tooltip
          width="200"
        /> -->
        <el-table-column
          label="数据处理使用方式"
          prop="dataHandleType"
          show-overflow-tooltip
          width="160"
        />

        <el-table-column
          label="数据处理使用目的"
          prop="dataHandleGoal"
          show-overflow-tooltip
          width="160"
        />

        <el-table-column
          label="是否涉及数据跨主体流动情况"
          prop="bodyFlow"
          show-overflow-tooltip
          width="210"
        />

        <!-- <el-table-column
          label="数据跨主体流动接收方"
          prop="bodyFlowReceive"
          width="200"
          show-overflow-tooltip
        /> -->
      </el-table-column>
      <!-- 风险评估 -->
      <el-table-column label="风险评估" align="center">
        <el-table-column
          label="风险评估机构"
          prop="riskAgency"
          show-overflow-tooltip
          width="160"
        />
        <el-table-column
          label="风险评估时间"
          prop="riskTime"
          width="160"
          show-overflow-tooltip
        />
        <!-- <el-table-column
          label="风险评估结果（风险等级）"
          prop="riskResultLevel"
          width="200"
          show-overflow-tooltip
        /> -->
        <el-table-column
          label="风险评估结果"
          prop="riskResult"
          width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="整改措施"
          prop="rectificationMeasures"
          width="160"
          show-overflow-tooltip
        />
      </el-table-column>
      <!-- 承载信息系统情况 -->
      <el-table-column label="承载信息系统情况 " align="center">
        <el-table-column
          label="名称"
          prop="appName"
          show-overflow-tooltip
          width="160"
        />
        <el-table-column
          label="等保定级情况"
          prop="gradingInfo"
          width="160"
          show-overflow-tooltip
        />
        <el-table-column
          label="关键信息基础设施认定情况"
          prop="keyInfo"
          width="200"
          show-overflow-tooltip
        />
      </el-table-column>
    </common-table>
    <pagination
      slot="pagination"
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </common-list>
</template>

<script>
import { listCore } from "@/api/datascan/filing/index";
import { queryBusinessList, queryList } from "@/api/datascan/dbinfo/info";
import BaseList from "@/mixins/BaseList.vue";
import CommonIcon from "@/components/CommonIcon";
export default {
  name: "index",
  components: { CommonIcon },
  mixins: [BaseList],
  data() {
    return {
      exportLoading: false,
      businessCodeList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        appName: null,
        dbId: null,
        dbName: null,
        appName: null,
      },
      total: 0,
      list: [],
      dbList: [],
      loading: false,
    };
  },
  methods: {
    changeAppName(val) {
      this.queryDbList(val);
    },

    queryDbList(val) {
      queryList({ appName: val }).then((res) => {
        if (res && res.code === 200) {
          this.dbList = res.data.dataList;
        } else {
          this.dbList = [];
        }
      });
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.queryParams = this.$options.data().queryParams;
    },
    queryBusinessCodeList() {
      queryBusinessList().then((res) => {
        if (res && res.code === 200) {
          this.businessCodeList = res.data;
        } else {
          this.businessCodeList = [];
        }
      });
    },
    changeUserStatus(data) {
      this.exportLoading = true;
      this.download(
        "/datascan/b/filing/exportFormCore",
        {
          ...this.queryParams,
          operaSystem: this.queryParams.appName,
          pageSize: 10000,
          dataType: "core",
          type: data,
        },
        `核心数据报备${new Date().getTime()}.${data}`,
        1800000
      ).finally(() => {
        this.exportLoading = false;
      });
    },

    getList() {
      this.loading = true;
      listCore(this.queryParams)
        .then((res) => {
          if (res && res.code === 200) {
            this.list = res.data.dataList;
            this.total = res.data.totalCount;
            this.handleListTips(res);
          } else {
            this.list = [];
            this.total = 0;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },

  created() {
    this.getList();
    this.queryBusinessCodeList();
    this.queryDbList();
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-table thead.is-group th {
  background: #fff !important;
}

.btn-color-hover-white:hover,
.btn-color-hover-white:focus {
  .iconfont {
    color: #fff !important;
  }
}
</style>
